<template>
  <div class="carousel">
    <div class="picture-list">
      <div v-masonry>
        <!-- 这里是你的每个独特的项目内容 -->
        <div
          v-masonry-tile
          class="masonry-box"
          v-for="(item, index) in imgList"
          :key="index"
        >
          <img :src="'data:image/png;base64,' + item.image" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { queryComment } from '@/api/content.js'
export default {
  components: {
  },
  data () {
    return {
      show: true,
      imgList: [] // 图片列表
    };
  },
  mounted () {
    this.queryCommentFn()
  },
  methods: {
    // 查询评论和图片
    queryCommentFn () {
      queryComment({
        createUserId: sessionStorage.getItem('userId')
      }).then(res => {
        if (res.success) {
          this.imgList = res.data
        }
      })
    }
  }
};
</script>

<style scoped>
.carousel {
  /* background-color: pink; */
  width: 1200px;
  margin: auto;
}

.picture-list img {
  max-width: 300px;
  margin: 5px; /* 这会在砌体砖块之间加上间距 */
}

.masonry-box {
  overflow: hidden;
}
</style>
